// @ts-nocheck
import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { createRoot } from 'react-dom/client'
import SemiTable from './SemiTable'

@customElement('my-lit-component')
export default class MyLitComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
      color: blue;
    }
  `

  @property({ type: String })
  msg = ''

  @property({ type: Array })
  list = []

  @property({ type: Array })
  columns = []

  @property({ type: Array })
  dataSource = []
  root: any

  constructor() {
    super()
    this.root = null
    this.attachShadow({ mode: 'open' }) // 使用 Shadow DOM

    this.root = createRoot(this.shadowRoot as any)
  }

  connectedCallback() {
    super.connectedCallback()
  }

  disconnectedCallback() {
    // 当自定义元素从 DOM 中移除时调用
    if (this.root) {
      this.root.unmount() // 卸载 React 组件
      this.root = null
    }
  }

  render() {
    if (!this.root) {
      return
    }
    return this.root.render(
      <div>
        <h1>test</h1>
        <SemiTable list={this.list} columns={this.columns} dataSource={this.dataSource} />
      </div>
    )
  }
}
